<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas裁剪图片,纯前端</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
    <style>
        .demo-wrapper {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 300px;
            top: 0;
            display: inline-block
        }

        #chooseBox {
            width: 150px;
            height: 150px;
            border: 1px solid #4fb8e3;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000
        }

        .cut-pic {
            position: absolute;
            left: 400px;
            top: 400px;
        }
    </style>
</head>

<body>
    <div>
        <input type="file" id="imgFile">
    </div>
    <div class="demo-wrapper">
        <img id="demoImg" style="height: 300px;" alt="">
        <div id="chooseBox"></div>
    </div>
    <div class="cut-pic">
        <canvas id="myCan" width="150" height="150"></canvas>
        <button id="cut">裁剪文件</button>
        <button id="btn">后台返回获取裁剪后的文件</button>
        <img id="returnImg" alt="">
    </div>

</body>
<script>
    window.onload = function () {
        var can = document.getElementById("myCan");
        var btn = document.getElementById("btn");
        var returnImg = document.getElementById("returnImg");
        var ctx = can.getContext("2d");

        $('#imgFile').change(function () {
            var file = $('#imgFile')[0].files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#demoImg').attr('src', e.target.result);
            };
            reader.readAsDataURL(file);
        });

        $('#chooseBox').mousedown(function (e) {
            var originX = e.offsetX;
            var originY = e.offsetY;
            let width = $("#demoImg").width() - 150;
            window.onmousemove = function (e) {
                $('#chooseBox').css({
                    position: 'absolute',
                    left: e.clientX - originX - 300 + 'px',
                    top: e.clientY - originY + 'px'
                });
                if ($('#chooseBox').position().left <= 0) {
                    $('#chooseBox').css({
                        left: 0
                    });
                }
                if ($('#chooseBox').position().left >= width) {
                    $('#chooseBox').css({
                        left: width + 'px'
                    });
                }
                if ($('#chooseBox').position().top <= 0) {
                    $('#chooseBox').css({
                        top: 0
                    });
                }
                if ($('#chooseBox').position().top >= width) {
                    $('#chooseBox').css({
                        top: width + 'px'
                    });
                }
                $('#chooseBox').mouseout(function () {
                    window.onmousemove = null;
                    return
                })
            };
            window.onmouseup = function () {
                window.onmousemove = null;
                return
            }
        });

        $('#cut').click(function () {
            var newX = $('#chooseBox').position().left * 3.45;
            var newY = $('#chooseBox').position().top * 2.6;
            var img = document.getElementById("demoImg");
            ctx.drawImage(img, newX, newY, 150 * 3.45, 150 * 2.6, 0, 0, 150, 150);

            console.log(can.toDataURL('image/jpeg'));
        });
        // btn.onclick = function () {
        //     var data = can.toDataURL();
        //     data = data.split(',')[1];
        //     data = window.atob(data);
        //     var ia = new Uint8Array(data.length);
        //     for (var i = 0; i < data.length; i++) {
        //         ia[i] = data.charCodeAt(i);
        //     }
        //     var blob = new Blob([ia], { type: "image/png", endings: 'transparent' });
        //     var fd = new FormData();
        //     console.log(blob);
        //     fd.append('avatarFile', blob, 'image.png');
        //     var httprequest = new XMLHttpRequest();
        //     httprequest.open('POST', '/guest/avatar', true);
        //     httprequest.send(fd);
        //     httprequest.onreadystatechange = function () {
        //         if (httprequest.status == 200 && httprequest.readyState == 4) {
        //             console.log(httprequest.responseText);
        //             $('#returnImg').attr('src', '/images/' + JSON.parse(httprequest.responseText).json);
        //         }
        //     };
        // };
    }
</script>

</html>